<template>
  <div>
    <!-- 表格部分 -->
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 5px">
        <el-alert
          title="请小心移除成员，不要从管理角色将admin移除"
          type="warning"
          show-icon
          :closable="false"
          style="margin-bottom: 5px; width: 50%"
        />
        <el-button
          type="danger"
          plain
          size="small"
          :disabled="multiple"
          @click="onDelete"
          ><el-icon><DeleteFilled /></el-icon>移除成员</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <!-- <el-table-column prop="num" label="序号" /> -->
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="roleName" label="角色" />
        <el-table-column
          prop="rank"
          label="等级"
          sortable
          :sort-method="customSortMethod('rank')"
        />
        <el-table-column
          prop="lastLoginTime"
          label="最后登录"
          sortable
          :sort-orders="['descending', 'ascending']"
          width="180"
        >
          <template #default="{ row }">
            <span>{{
              dayjs(row.lastLoginTime).format('YYYY-MM-DD HH:mm:ss')
            }}</span>
          </template></el-table-column
        >
        <el-table-column prop="lastLoginIp" label="最后登录IP" />
        <el-table-column
          prop="loginCount"
          label="登录"
          sortable
          :sort-method="customSortMethod('loginCount')"
        />
        <el-table-column prop="disabled" label="禁用">
          <template #default="{ row }">
            <el-tag
              :disable-transitions="true"
              type="danger"
              v-if="row.disabled"
              >是</el-tag
            >
            <el-tag :disable-transitions="true" type="success" v-else
              >否</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作选项">
          <template #default="{ row }">
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onRevocation(row)"
              ><el-icon><Delete /></el-icon>移除成员</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script  setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import { useRoute } from 'vue-router'
import { getmembersList, deleteMember } from '@/api/user/role.js'

const route = useRoute()

const ids = ref([])
const multiple = ref(true)
const total = ref(0)
const tableData = ref([])
const RoleId = ref()

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const getList = () => {
  const { roleId } = route.query
  RoleId.value = roleId
  getmembersList({ ...queryParams.value, roleId: roleId }).then((res) => {
    tableData.value = res.data.pagination.list
    total.value = res.data.pagination.total
  })
}
// 批量移除成员
const onDelete = () => {
  deleteMember({ roleId: RoleId.value, userIds: ids.value }).then((res) => {
    if (res.success) {
      ElMessage({
        type: 'success',
        message: res.message
      })
      getList()
    }
  })
}

// 删除
const onRevocation = (row) => {
  console.log(row, RoleId.value)
  ElMessageBox.confirm('您确定要删除这条数据吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const id = []
      id.push(row.id)
      deleteMember({ roleId: RoleId.value, userIds: id }).then((res) => {
        if (res.success) {
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  multiple.value = !selection.length
}

// 排序方法
const customSortMethod = (column) => {
  return (a, b) => {
    const numA = parseInt(a[column])
    const numB = parseInt(b[column])
    if (isNaN(numA) || isNaN(numB)) {
      return 0
    }
    if (numA < numB) {
      return -1
    } else if (numA > numB) {
      return 1
    } else {
      return 0
    }
  }
}
getList()
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}

::v-deep {
  .el-form {
    .el-form-item .second_label {
      .el-form-item__label {
        font-weight: normal !important;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .second_label {
    .el-form-item__error {
      position: static !important;
    }
  }
}

::v-deep {
  .tree-border {
    margin-top: 5px;
    border: 1px solid #e5e6e7;
    background: #fff none;
    border-radius: 4px;
    width: 100%;
  }
}
</style>
